<template>
	<view class="w-710 ml-20 pb-60">
		<!-- 导航栏 -->
		<image src="/static/dingbu.png" class="mine-navbar-bg" :style="{ height: navbarHeight + 'rpx' }"
			mode="aspectFill"></image>
		<u-navbar title="工具台" :autoBack="false" leftIcon=" " bgColor="transparent" :titleStyle="{ color: '#fff' }"
			safeAreaInsetTop placeholder></u-navbar>
		<image src="/static/icon_bj1111.png" class="w-710 h-280 mb-20 mt-20" mode="aspectFil"></image>

		<!-- 标签页切换 -->
		<view class="rowsc rowsm mb-20">
			<view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
				<image src="/static/icon_tzuo.png" class="w-16 h-12" mode="aspectFil"></image>
				<view class="fs-32 fw-b ml-12 mr-12" :style="{ color: currentTab === 0 ? '#0B993C' : '#666' }">食用林模块
				</view>
				<image src="/static/icon_tyou.png" class="w-16 h-12" mode="aspectFil"></image>
			</view>
			<view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
				<image src="/static/icon_tzuo.png" class="w-16 h-12" mode="aspectFil"></image>
				<view class="fs-32 fw-b ml-12 mr-12" :style="{ color: currentTab === 1 ? '#0B993C' : '#666' }">经济林模块
				</view>
				<image src="/static/icon_tyou.png" class="w-16 h-12" mode="aspectFil"></image>
			</view>
		</view>

		<!-- 内容区域 -->
		<swiper class="content-swiper" :current="currentTab" @change="onSwiperChange" :duration="300">
			<!-- 食用林模块 -->
			<swiper-item>
				<view class="mt-30">
					<!-- 产品检测依据 -->
					<view class="rowsl mt-40">
						<view class="mb-20 fs-30 fw-b">产品监测</view>
						<view class="list-box">
							<view v-for="(item, index) in productDetectionList" :key="index"
								class="w-150 h-180 rowscl rowsm pl-10 pr-10" @click="handleClick(item)">
								<image :src="item.icon" class="w-76 h-76 mb-20" mode="aspectFil"></image>
								<view class="fs-24 col666 tct">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="rowsl mt-40">
						<view class="mb-20 fs-30 fw-b">土壤监测</view>
						<view class="list-box">
							<view v-for="(item, index) in soilDetectionList" :key="index"
								class="w-150 h-180 rowscl rowsm pl-10 pr-10" @click="handleClick(item)">
								<image :src="item.icon" class="w-76 h-76 mb-20" mode="aspectFil"></image>
								<view class="fs-24 col666 tct">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
					<view class="rowsl mt-40">
						<view class="mb-20 fs-30 fw-b">快检监测</view>
						<view class="list-box">
							<view v-for="(item, index) in quickDetectionList" :key="index"
								class="w-150 h-180 rowscl rowsm pl-10 pr-10" @click="handleClick(item)">
								<image :src="item.icon" class="w-76 h-76 mb-20" mode="aspectFil"></image>
								<view class="fs-24 col666 tct">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>

			<!-- 经济林模块 -->
			<swiper-item>
				<view class="mt-30">
					<view class="rowsl mt-40">
						<view class="mb-20 fs-30 fw-b">经济林大数据展示</view>
						<view class="list-box">
							<view v-for="(item, index) in jingjimoduleList" :key="index"
								class="w-150 h-180 rowscl rowsm pl-10 pr-10" @click="handleClick(item)">
								<image :src="item.icon" class="w-76 h-76 mb-20" mode="aspectFil"></image>
								<view class="fs-24 col666 tct">
									{{ item.name }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<CustomTabbar :currentTab="tabName" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			tabName: 'workbench',
			currentTab: 0, // 当前选中的标签页，0-食用林，1-经济林
			// 自定义导航栏高度 (可选)
			customNavbarHeight: null, // 设置为具体数值如 180 来覆盖自动计算
			// 产品检测
			productDetectionList: [
				{ name: '产品检测依据', icon: '/static/icon_t1.png', path: '/pages/workbench/01task/01jypdbz' },
				{ name: '产品监测任务管理', icon: '/static/icon_t2.png', path: '/pages/workbench/01task/02jcrwxf' },
				{ name: '产品信息管理', icon: '/static/icon_t4.png', path: '/pages/workbench/01task/chouyangdan' },
				// { name: '产品检测单管理', icon: '/static/icon_t4.png', path: '/pages/workbench/01task/jiancedan' },
				{ name: '数据分析汇总', icon: '/static/icon_t5.png', path: '/pages/workbench/01task/01cj' },
				{ name: '核查处置', icon: '/static/icon_t6.png', path: '/pages/workbench/01task/hechachuzhi' },
				{ name: '电子通知', icon: '/static/icon_t7.png', path: '/pages/workbench/01task/dianzitongzhi' },
				{ name: '检测机构管理', icon: '/static/icon_t8.png', path: '/pages/workbench/01task/jiancejigou' },
				{ name: '产品抽检信息', icon: '/static/icon_t8.png', path: '/pages/workbench/choujian/choujian' },
			],
			// 土壤监测
			soilDetectionList: [
				{ name: '土壤监测标准', icon: '/static/icon_t9.png', path: '/subPkg/trjcbz/trjcbz' },
				{ name: '土壤监测任务管理', icon: '/static/icon_t10.png', path: '/subPkg/trjcbz/trjcrw' },
				{ name: '土壤抽样管理', icon: '/static/icon_t11.png', path: '/subPkg/trjcbz/trcygl' },
				{ name: '土壤检测数据', icon: '/static/icon_t12.png', path: '/subPkg/trjcbz/trjcgl' },
				{ name: '土壤核查处置', icon: '/static/icon_t13.png', path: '/subPkg/trjcbz/wtfkcl' },
			],
			// 快检监测
			quickDetectionList: [
				{ name: '快检巡监员管理', icon: '/static/icon_1ts.png', path: '/pages/workbench/01task/kuaijian' },
				{ name: '快检任务管理', icon: '/static/icon_1ts.png', path: '/pages/workbench/01task/kuaijiantask' },
			],
			// 经济林模块
			jingjimoduleList: [
				{ name: '种植面积管理', icon: '/static/icon_12fx.png', path: '/pages/workbench/07jingjilin/01area' },
				{ name: '种植产量管理', icon: '/static/icon_15tz.png', path: '/pages/workbench/07jingjilin/02yield' },
				{ name: '种植产值管理', icon: '/static/icon_t10.png', path: '/pages/workbench/07jingjilin/03value' },
				{ name: '林业保护发展云讲堂', icon: '/static/icon_22jg.png', path: '/pages/workbench/07jingjilin/04classroom' },
				{ name: '林业品牌', icon: '/static/icon_13jy.png', path: '/pages/workbench/07jingjilin/05brand' },
				{ name: '品牌基地管理', icon: '/static/icon_1ts.png', path: '/pages/workbench/07jingjilin/06base' },
				{ name: '政策法规库', icon: '/static/icon_23sc.png', path: '/pages/workbench/07jingjilin/07policy' },
				{ name: '栽培技术', icon: '/static/icon_24zs.png', path: '/pages/workbench/07jingjilin/08tech' },
				{ name: '节庆活动', icon: '/static/icon_25gd.png', path: '/pages/workbench/07jingjilin/09activity' },
			],
		}
	},
	computed: {
		navbarHeight() {
			// 如果设置了自定义高度，则使用自定义高度
			if (this.customNavbarHeight) {
				return this.customNavbarHeight;
			}
			// 否则自动计算：状态栏高度 + 导航栏高度
			const systemInfo = uni.getSystemInfoSync();
			// 将px转换为rpx (1px = 2rpx)
			const statusBarHeightRpx = systemInfo.statusBarHeight * 2;
			const navbarHeightRpx = 44 * 2; // 44px = 88rpx
			return statusBarHeightRpx + navbarHeightRpx;
		}
	},
	methods: {
		// 切换标签页
		switchTab(index) {
			this.currentTab = index
		},
		
		// swiper切换事件
		onSwiperChange(e) {
			this.currentTab = e.detail.current
		},
		
		handleClick(item) {
			const autoOpenNames = ['产品检测任务下发', '发起电子通知', '土壤检测任务下发']
			const needAutoOpen = autoOpenNames.includes(item.name)
			const url = needAutoOpen ? `${item.path}?openAdd=1` : item.path
			uni.navigateTo({ url })
		}
	}
}
</script>

<style lang="scss" scoped>
.mine-navbar-bg {
	position: fixed;
	top: 0;
	left: 0;
	width: 750rpx;
	z-index: 1;
}

.tab-item {
	display: flex;
	align-items: center;
	padding: 20rpx 40rpx;
	margin: 0 20rpx;
	border-radius: 50rpx;
	background-color: rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease;
	
	&.active {
		background-color: rgba(11, 153, 60, 0.1);
		box-shadow: 0 4rpx 12rpx rgba(11, 153, 60, 0.2);
	}
}

.content-swiper {
	height: calc(100vh - 200rpx);
	min-height: 800rpx;
}

.list-box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22rpx;
	justify-content: space-between;
}
</style>
